<template>
    <div>
         <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>科室管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-form :inline="true" :model="department" class="demo-form-inline">
                <!-- 下拉框 -->
                <el-form-item label="上级科室" label-width="70px">
                 <el-select v-model="department.parentId" clearable placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item> 
                <el-form-item label="子级科室" label-width="70px">
                    <el-input
                        placeholder="请输入科室名称"
                        v-model="department.departmentName"
                        clearable>
                    </el-input>
                </el-form-item>

                <!-- 昵称 -->
                 <el-form-item label="主任" label-width="70px">
                    <el-input
                        placeholder="请输入主任名称"
                        v-model="department.departmentDirector"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-left: 50px;">
                    <el-button icon="el-icon-refresh" @click="resetDepartment">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="getDepartment">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
                    <el-button type="warning" icon="el-icon-download">导出</el-button>
                </el-form-item>
                 </el-form>

                <el-table
                :data="departmentList "
                border
                max-height="400"
                style="width: 100%;">
                <el-table-column
                type="index"
                width="50">
                </el-table-column>
                <el-table-column
                prop="departmentName"
                label="科室名"
                width="80">
                </el-table-column>
                <el-table-column
                prop="departmentDirector"
                label="科室主任"
                width="80">
                </el-table-column>
                <el-table-column
                prop="departmentDescription"
                label="描述"
                width="300">
                </el-table-column>
               <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                   
                    <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                   
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleUpdate(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
                   
                    </el-tooltip>
                    
                 
                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                   
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
                   
                    </el-tooltip>                                                 
                </template>
                </el-table-column>

                </el-table>
                <!-- 分页 -->
             <el-pagination
                style="padding-top:10px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
             </el-pagination>    
                    
             <DepartmentUpdate :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></DepartmentUpdate> 
        </el-card>
    </div>

</template>

<script>
import {getDepartment} from '../../api/dept'
import {deleteDepartment} from'../../api/dept'

import DepartmentUpdate from './DepartmentUpdate'
export default {
    name:"Department",
    components:{
        DepartmentUpdate
    },
    data() {
        return{
        options: [{
          value: '1',
          label: '内科'
        }, {
          value: '2',
          label: '外科'
        }, {
          value: '15',
          label: '妇产科'
        }, {
          value: '18',
          label: '儿科'
        }, {
          value: '21',
          label: '耳鼻喉科'
        },{
          value: '24',
          label: '肿瘤科'
        },
        {
          value: '26',
          label: '口腔科'
        },{
          value: '28',
          label: '病理科'
        },{
          value: '30',
          label: '神经科'
        },{
          value: '32',
          label: '非临床科室'
        }],

            department:{
                departmentId: "",
                parentId: "2",
                departmentName: "",
                departmentDescription: "",
                departmentDirector: "",
                deleted: "0",
                createTime: "",
                updateTime: ""
            },
            size: 6,
            total: 100,
            current: 1,
            departmentList:[],
            addOrUpdateVisible: false,
        }
    },
    methods:{
        show(){
        this.addOrUpdateVisible = true
        console.log(this.addOrUpdateVisible);
        },

        //监听子组件弹窗关闭后触发，
        showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    },

        handleUpdate(index,row) {
         //   this.addOrUpdateVisible = true;
            console.log(index,row)
        },
       async handleDelete(index,row) {
            const res = await deleteDepartment(row.departmentId);
            console.log(res)
           // console.log(index,row)

        }
        ,
        async getDepartment() {
            const res = await getDepartment(this.size,this.current,this.department);
            this.total = res.data.data.total;
            this.departmentList = res.data.data.departmentList;
            this.getDepartment();
           // console.log(res);     
        },
         //重置查询条件
        resetDepartment() {
        this.department = {
            departmentId: "",
                parentId: "",
                departmentName: "",
                departmentDescription: "",
                departmentDirector: "",
                deleted: "0",
                createTime: "",
                updateTime: ""
        }
        },
        //当每页条数发生改变时
       handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.size = val;
        //重新查询数据
        this.getDepartment();
      },
      //当前页码改变时
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.current = val;
        this.getDepartment(); 
      },

    },
    created() {
        this.getDepartment();
    }
    
}
</script>

<style>

</style>